<script setup lang="ts">
import { DataBrowsingDetailProps } from "@/views/dataBrowsing/detail/types.ts";
import JsonEditorVue from "json-editor-vue";
import { useDark } from "@pureadmin/utils";

defineOptions({
	name: "DataBrowsingDetailView",
});
const props = withDefaults(defineProps<DataBrowsingDetailProps>(), {
	open: false,
	detail: () => {},
});

const { isDark } = useDark();

const detail = toRef(props, "detail");
const open = toRef(props, "open");
const openTemp = ref(false);

const emit = defineEmits(["update-open"]);

watch(open, function () {
	openTemp.value = open.value;
});

onMounted(function () {
	openTemp.value = open.value;
});

function afterOpenChange() {}
</script>

<template>
	<div class="data-browsing-detail-view">
		<a-drawer
			v-model:open="openTemp"
			class="custom-class"
			root-class-name="data-browsing-detail-drawer"
			title="数据详情"
			placement="right"
			width="50%"
			@close="emit('update-open', false)"
			@after-open-change="afterOpenChange"
		>
			<div class="w-full h-full add-index-json">
				<json-editor-vue
					:class="{ 'jse-theme-dark': isDark }"
					v-model="detail"
					mode="text"
					:readOnly="true"
					:navigationBar="false"
					:statusBar="false"
					:mainMenuBar="false"
				/>
			</div>
		</a-drawer>
	</div>
</template>

<style scoped lang="scss">
.data-browsing-detail-view {
	width: 100%;
}
</style>
